<template>
	<view class="container">
		<view class="formBox" v-if="visitorDetails!=null">
			<text class="visitor-title">拜访业主</text>
			<u-gap height="16"></u-gap>
			<view class="line">
				<view class="line-title">姓名：</view>
				<u--text :size="26" color="#999999" mode="name" :text="visitorDetails.name"></u--text>
			</view>
			<view class="line">
				<view class="line-title">地址：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.visitAddress"></u--text>
			</view>
			<u-gap height="32"></u-gap>
			<text class="visitor-title">申请人</text>
			<u-gap height="16"></u-gap>
			<view class="line">
				<view class="line-title">姓名：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.visitName"></u--text>
			</view>
			<view class="line">
				<view class="line-title">联系电话：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.phonenumber"></u--text>
			</view>
			<view class="line">
				<view class="line-title">身份证：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.identityCard"></u--text>
			</view>
			<view class="line">
				<view class="line-title">到访时间：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.startTime"></u--text>
			</view>
			<view class="line">
				<view class="line-title">来访事由：</view>
				<u--text :size="26" color="#999999" :text="visitorDetails.reason"></u--text>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		name: '',
		components: {},
		data() {
			return {
				id:null,
				visitorDetails:null
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getDetails()
		},
		created() {
			
		},
		mounted() {},
		destroyed() {},
		methods: {
			getDetails(){
				let data={id:this.id}
				api.getVisitorDetails(data).then(res => {
					if(res.data.code==200){
						this.visitorDetails=res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: calc(100% - 64rpx);
	padding: 32rpx;
	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
		.visitor-title{
			color: #17abe3;
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
			border-bottom: 6rpx transparent solid;
			border-image: linear-gradient(to right,#17abe3,#fff) 1 1;
			margin-bottom: 20rpx;
		}
		.line-btn{
			justify-content: space-around;
		}
		.line {
			display: flex;
			width: 100%;
			min-height: 60rpx;
			// line-height: 60rpx;
			align-items: center;
	
			.line-title {
				width: 200rpx;
				font-size: 28rpx;
	
			}
		}
	}
}
</style>
